<template>
    <div class="recommend">
        <!-- 轮播图 -->
        <div class="banner">
            <el-carousel class="banner-list" trigger="click" height="466px">
                <el-carousel-item class="banner-item">
                    <img class="img-item" src="./image/banner1.png" alt="" />
                </el-carousel-item>
                <el-carousel-item class="banner-item">
                    <img class="img-item" src="./image/banner2.png" alt="" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- banner以下 -->
        <div class="recommend-list">
            <!-- 中间导航栏 -->
            <el-affix :offset="0">
                <div class="column">
                    <div class="cart-list">
                        <div class="recommend-list-item">
                            <router-link to="/recommend/recommend"
                                ><span>推荐</span></router-link
                            >
                            <router-link to="/recommend/original"
                                ><span>作品</span></router-link
                            >
                            <router-link to="/recommend/course"
                                ><span>教程</span></router-link
                            >
                            <router-link to="/recommend/specialTopic"
                                ><span>专题</span></router-link
                            >
                            <router-link to="/recommend/information"
                                ><span>动态</span></router-link
                            >
                            <router-link to="/recommend/attention"
                                ><span>关注</span></router-link
                            >
                        </div>
                        <span class="recommend-list-right">
                            <el-icon class="icon"><Grid /></el-icon>
                            <el-button
                                class="recommend-button"
                                text
                                @click="dialogVisible = true"
                            >
                                选择兴趣爱好
                            </el-button>
                            <el-dialog
                                v-model="dialogVisible"
                                width="70%"
                                :before-close="handleClose"
                            >
                                <div>选择我的兴趣技能 0 / 7</div>
                                <el-input
                                    size="large"
                                    :prefix-icon="Search"
                                    placeholder="搜索兴趣技能"
                                    class="w-55 m-2"
                                    v-model="input"
                                />

                                <div>推荐兴趣技能</div>
                                <div
                                    v-for="(item, index) in hobbyData"
                                    :key="item.id"
                                >
                                    {{ item.name }}
                                </div>
                                <template #footer>
                                    <span class="dialog-footer">
                                        <el-button
                                            @click="dialogVisible = false"
                                            >取消</el-button
                                        >
                                        <el-button
                                            type="primary"
                                            @click="dialogVisible = false"
                                        >
                                            确定
                                        </el-button>
                                    </span>
                                </template>
                            </el-dialog>
                        </span>
                    </div>
                </div>
            </el-affix>

            <!-- 视频播放区域 -->
            <RouterView></RouterView>
            <!-- 回到顶部按钮 -->
            <div class="backTop" ref="back">
                <el-backtop>
                    <!-- :bottom="320" :right="180" -->
                    <img
                        style="
                            height: 100%;
                            width: 100%;
                            background-color: var(--el-bg-color-overlay);
                            text-align: center;
                            line-height: 40px;
                        "
                        src="./image/icon.png"
                    />
                </el-backtop>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Grid } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { ref, computed, onMounted } from 'vue'
import useDialogStore from '@/store/dialog'
const dialogStore = useDialogStore()
const data = computed(() => {
    return dialogStore.dialogData.data.data
})

defineProps<{
    label: string
}>()
onMounted(() => {
    dialogStore.getDialogData()
})

//模拟数据
const hobbyData = ref(data)

const back = ref()
//input输入框
const input = ref('')
//多选框
const checked1 = ref(true)

// dialog弹框
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
</script>

<style lang="less" scoped>
.recommend {
    width: 100%;
    // 轮播图
    .banner {
        width: 100%;
        height: 465px;
        padding-top: 20px;

        .banner-list {
            width: 1200px;
            margin: 0 auto;
            img {
                width: 100%;
                height: 465px;
                border-radius: 4px;
            }
        }
    }

    //中间导航栏
    .recommend-list {
        width: 100%;
        background-color: #f5f7f9;

        .column {
            width: 100%;
            height: 80px;
            background-color: #ffffff;
            .cart-list {
                margin: 0 auto;
                width: 1200px;
                height: 80px;
                background-color: #fff;
                line-height: 80px;
                color: #7d8090;
                font-size: 16px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .recommend-list-item {
                    width: 1200px;
                    text-align: center;
                    span {
                        display: inline-block;
                        width: 40px;
                        height: 64px;
                        margin: 0 18px;
                        color: #4f7497;
                        border-bottom: 3px solid #000;
                    }
                }
                .recommend-list-right {
                    width: 130px;
                    display: flex;
                    .icon {
                        height: 80px;
                        line-height: 80px;
                    }
                    .recommend-button {
                        height: 80px;
                    }
                }
            }
        }
        .backTop {
            position: fixed;
            bottom: 320px !important;
            right: 110px !important;
            box-shadow: none !important;
        }
    }
    // 视频播放区域
}
</style>
